Skip to content

feat(newspack-icons): add ai and ai-text to npm package #4235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 16, 2025
Merged

feat(newspack-icons): add ai and ai-text to npm package #4235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f26cb9f
feat(newspack-icons): add ai and ai-text to npm package
thomasguillot Oct 14, 2025
09cb96d
feat(components-demo): add demo of all available newspack-icons
thomasguillot Oct 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/icons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
export { default as accessibility } from './src/accessibility';
export { default as ad } from './src/ad';
export { default as ai } from './src/ai';
export { default as aiText } from './src/ai-text';
export { default as archiveLoop } from './src/archive-loop';
export { default as aspectLandscape } from './src/aspect-landscape';
export { default as aspectPortrait } from './src/aspect-portrait';
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "newspack-icons",
"version": "1.0.1",
"version": "1.0.2",
"description": "A collection of custom SVG icons for Newspack projects",
"main": "index.js",
"module": "index.js",
Expand Down
12 changes: 12 additions & 0 deletions packages/icons/src/ai-text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';

const aiText = (
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<Path d="M4.066 8.097C4.04642 8.08943 4.0296 8.07611 4.01773 8.0588C4.00586 8.04149 3.99951 8.02099 3.99951 8C3.99951 7.97901 4.00586 7.95851 4.01773 7.9412C4.0296 7.92389 4.04642 7.91057 4.066 7.903L6.606 6.9C6.67278 6.87397 6.73346 6.83442 6.78422 6.78382C6.83499 6.73323 6.87475 6.67269 6.901 6.606L7.903 4.066C7.91095 4.04682 7.92441 4.03042 7.94167 4.01889C7.95894 4.00735 7.97924 4.0012 8 4.0012C8.02077 4.0012 8.04106 4.00735 8.05833 4.01889C8.07559 4.03042 8.08905 4.04682 8.097 4.066L9.1 6.606C9.153 6.74 9.26 6.846 9.394 6.9L11.934 7.902C11.9536 7.90957 11.9704 7.92289 11.9823 7.9402C11.9941 7.95751 12.0005 7.97801 12.0005 7.999C12.0005 8.01999 11.9941 8.04049 11.9823 8.0578C11.9704 8.07511 11.9536 8.08843 11.934 8.096L9.394 9.1C9.32731 9.12625 9.26677 9.16601 9.21618 9.21678C9.16558 9.26754 9.12603 9.32822 9.1 9.395L8.098 11.935C8.09043 11.9546 8.07711 11.9714 8.0598 11.9833C8.04249 11.9951 8.02199 12.0015 8.001 12.0015C7.98001 12.0015 7.95951 11.9951 7.9422 11.9833C7.92489 11.9714 7.91157 11.9546 7.904 11.935L6.9 9.394C6.87386 9.32712 6.83415 9.26639 6.78338 9.21562C6.73261 9.16484 6.67188 9.12514 6.605 9.099L4.066 8.097ZM4 20H13V18.5H4V20ZM4 14.5V16H20V14.5H4Z" />
</SVG>
);

export default aiText;
12 changes: 12 additions & 0 deletions packages/icons/src/ai.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 28 additions & 2 deletions src/wizards/componentsDemo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ import '../../shared/js/public-path';
/**
* WordPress dependencies.
*/
import { Component, Fragment, render } from '@wordpress/element';
import { Component, Fragment, render, createInterpolateElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { audio, category, plus, reusableBlock, typography } from '@wordpress/icons';
import { Icon, audio, category, plus, reusableBlock, typography } from '@wordpress/icons';
import { ExternalLink } from '@wordpress/components';

/**
* Internal dependencies.
Expand Down Expand Up @@ -39,6 +40,7 @@ import {
Waiting,
WebPreview,
} from '../../components/src';
import * as newspackIcons from '../../../packages/icons';

class ComponentsDemo extends Component {
/**
Expand Down Expand Up @@ -730,6 +732,30 @@ class ComponentsDemo extends Component {
#51f1ff / Inverted
</BoxContrast>
</Card>
<Card>
<h2>{ __( 'Newspack Icons', 'newspack-plugin' ) }</h2>
<p>
{ createInterpolateElement(
__(
"This is a collection of custom SVG icons for Newspack projects.<br/>They are available in <code>newspack-plugin</code> in the <code>newspack-icons</code> package.<br/>There's also an <link>npm package</link> that you can install to use them in your projects.",
'newspack-plugin'
),
{
br: <br />,
code: <code />,
link: <ExternalLink href="https://npmjs.com/package/newspack-icons" />,
}
) }
</p>
<Grid columns={ 4 } gutter={ 16 } className="items-start">
{ Object.entries( newspackIcons ).map( ( [ name, icon ] ) => (
<div key={ name } className="flex flex-column items-center tc">
<Icon icon={ icon } />
<code style={ { marginTop: 8 } }>{ name }</code>
</div>
) ) }
</Grid>
</Card>
</div>
<Footer />
</Fragment>
Expand Down