Skip to content

Icon

The component is used to display icons that can be placed in other components. In order for the icon to work properly, you must first import it to the folder src/assets/icons in .svg format. Then the command should be made - npm run build-icons. VUE components will be created, which are then used by the Icon component to display the right icon.

Such an operation is performed because, there is no need to use all icons in each application, and the creation of icon components is automated by using svgo.

The sizes of icons depend on the Tailwind configuration - https://tailwindcss.com/docs/width. Colors can be given or are inherited by an icon from the parent element.

The icons used in Riupress are selected icons of the set https://icons8.com/line-awesome.

Preparation of the icon

The svg file should be prepared in such a way that it does not have any elements formatting the icon, e.g. defining color or size.The only attributes I can find is xmlns and viewbox. An example of an icon below:

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path
    d="M 7.21875 5.78125 L 5.78125 7.21875 L 14.5625 16 L 5.78125 24.78125 L 7.21875 26.21875 L 16 17.4375 L 24.78125 26.21875 L 26.21875 24.78125 L 17.4375 16 L 26.21875 7.21875 L 24.78125 5.78125 L 16 14.5625 Z"
  />
</svg>

If the file is not prepared in the above way, it will be optimized by svgo.

Props

icon
The component of the icon
type:Object
color
Allow the icon to give color through the Tailwind class
type:String
default:current
values:current, primary, secondary, warning, info, success, danger
size
Icon size
type:String
default:md
values:full, xs, sm, md, lg, xl

Examples

Icon sizes
xs
sm
md
lg
xl
html
<icon :icon="timesCircle" size="xs" color="primary" />
html
<icon :icon="timesCircle" size="sm" color="primary" />
html
<icon :icon="timesCircle" size="md" color="primary" />
html
<icon :icon="timesCircle" size="lg" color="primary" />
html
<icon :icon="timesCircle" size="xl" color="primary" />
Icon colors
current
primary
secondary
warning
danger
success
info
html
<icon :icon="timesCircle" />
html
<icon :icon="timesCircle" color="primary" />
html
<icon :icon="timesCircle" color="secondary" />
html
<icon :icon="timesCircle" color="warning" />
html
<icon :icon="timesCircle" color="danger" />
html
<icon :icon="timesCircle" color="success" />
html
<icon :icon="timesCircle" color="info" />

Icon component list

WARNING

Icons from which icon components are generated are in the folder /src/assets/icons/, However, the component files themselves in /src/components/icons/

IconAngleDoubleDown
IconAngleDoubleLeft
IconAngleDoubleRight
IconAngleDoubleUp
IconAngleDown
IconAngleLeft
IconAngleRight
IconAngleUp
IconArrowDown
IconArrowLeft
IconArrowRight
IconArrowUp
IconBars
IconBell
IconBook
IconBusinessTime
IconCalendar
IconChartBar
IconCheck
IconCheckCircle
IconCircle
IconClock
IconCode
IconCog
IconColumns
IconComment
IconComments
IconCopy
IconEllipsisHorizontal
IconEllipsisVertical
IconExclamationCircle
IconExclamationTriangle
IconEye
IconEyeSlash
IconFacebook
IconFile
IconFileAlt
IconFilter
IconGithub
IconGripHorizontal
IconHistorySolid
IconHome
IconHourglassEnd
IconHourglassStart
IconIcons
IconIndustry
IconLightbulb
IconLinkedin
IconListAlt
IconMoon
IconPauseCircle
IconPencilAlt
IconPlus
IconPlusCircle
IconProjectDiagram
IconQuestionCircle
IconRecordVinyl
IconRedoAlt
IconRetweet
IconSaasCycle
IconSearch
IconSignOutAlt
IconSlidersHorizontal
IconSort
IconSortDownSolid
IconSortSolid
IconSortUpSolid
IconStar
IconStarAlt
IconStickyNote
IconStopwatch
IconSun
IconSync
IconTachometerAlt
IconTags
IconTheaterMasks
IconTimes
IconTimesCircle
IconToolsSolid
IconTrashAlt
IconTwitter
IconUndoAlt
IconUser
IconUserCircle
IconUserCog
IconUserLock
IconUserPlus
IconUsers
IconYoutube